<template>
    <div class="myorder">
    <el-tabs v-model="activeName">
        <el-tab-pane label="待支付" name="first">
            <OrderDetail :orders="noPay" v-slot="orderData"><el-button type="primary" @click="pay(orderData.order._id)">立即支付</el-button></OrderDetail>
        </el-tab-pane>
        <el-tab-pane label="待收货" name="second">
            <OrderDetail :orders="noConfirm" v-slot="orderData"><el-button type="primary" @click="confirm(orderData.order._id)">确认收货</el-button></OrderDetail>
        </el-tab-pane>
        <el-tab-pane label="待评价" name="third">
            <OrderDetail :orders="noComment" v-slot="orderData">
                <el-button type="primary" v-if="isComment" @click="isComment=false">进入评价</el-button>
                <div v-else>
                    <el-input type="textarea" :rows="2" placeholder="请输入评价内容" v-model="commentContent">
                    </el-input>
                    <el-button type="primary" @click="comment(orderData.order._id)">立即评价</el-button>
                </div>
            </OrderDetail>
        </el-tab-pane>
      <el-tab-pane label="全部" name="fourth">
        <OrderDetail :orders="orders"></OrderDetail>
      </el-tab-pane>
    </el-tabs>
    </div>
</template>


<script>
import OrderDetail from '@/components/OrderDetail.vue'
export default {
    name: 'myorder',
    data() {
        return {
            isComment:true,//是否显示评价输入内容
            commentContent:'',//评价内容
            activeName:"second",
            orders:[]
        };
    },
    components:{
        OrderDetail
    },
    computed:{
        noPay(){
            return this.orders.filter(order => {
                return order.state == 0 ;
            });
        },
        noConfirm(){
            return this.orders.filter(order => {
                return order.state == 1 ;
            });
        },
        noComment(){
            return this.orders.filter(order => {
                return order.state == 2 ;
            });
        },
    },
    created(){
        this.axios.defaults.headers.common['Authorization'] = localStorage.getItem('token');
        this.axios.get("/api/getOrders")
            .then(res => {
                console.log("orders:",res.data.data);
                this.orders = res.data.data
            });
    },
    methods:{
        handleClick(tab,event) {
            
        },
        pay(id){
            this.editOrder(id,1)
        },
        confirm(id){
            this.editOrder(id,2)
        },
        comment(id){
            let comment = this.commentContent
            this.editOrder(id,3)
            this.axios.defaults.headers.common['Authorization'] = localStorage.getItem('token');
            this.axios.put('/api/addOrderComment',{ params: {orderId: id, comment}})
                .then(res => {
                    this.$message('评价内容记录成功！')
                })
        },
        editOrder(id,state) {
            let messages = ['支付成功','确认成功','评价成功！']
            console.log('adsda')
            this.axios.defaults.headers.common['Authorization'] = localStorage.getItem('token');
            this.axios.put('/api/editOrder',{ params: {orderId: id, state}})
            
                .then(res => {
                    this.$message(messages[state - 1])
                    this.$router.go(0)
                })
        }
    }

}
</script>
<style lang="scss">
.myorder{
    width:80%;
    margin-left: 11%;
    margin-top: 33px;
}
</style>